<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/common.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<style>
			.topbar {
				background: #f1c40f;
				height: 45px;
				border-bottom: 1px solid #DDDFE3;
			}
			.search {
				height: 35px;
				line-height: 35px;
				padding-left: 10px;
				border-radius: 30px;
				margin-top: 5px;
				position: absolute;
				left: 20px;
				right: 40px;
				font-size: 14px;
			}
			.thrSearch {
				left: 60px;
				right: 60px;
				background-color: #E8E8E8;
				color: #999;
			}
			#field::-webkit-input-placeholder {
				color: #666;
			}
			#field {
				height: 30px;
				width: 86%;
				margin-left: -14px;
			}
			.swipe {
				line-height: 45px;
				margin-right: 10px;
				color: #FFFFFF;
				float: right
			}
			.back {
				float: left;
				line-height: 45px;
				padding-left: 10px;
				color: #FFFFFF;
			}
			.back > i {
				font-size: 20px;
				font-size: 400;
			}
			input[type="text"] {
				background-color: #E8E8E8;
				border: 0;
			}
			/*垂直按钮*/
			.aui-btn-tab {
				width: 100%;
				background-color: #fff;
				display: box;
				display: -webkit-box;
				box-sizing: border-box;
				font-size: 12px;
				height: 55px;
			}
			.aui-btn-tab li {
				position: relative;
				text-align: center;
				color: #666;
				width: 100%;
				box-flex: 1;
				-webkit-box-flex: 1;
				box-sizing: border-box;
			}
			.aui-btn-tab li {
				font-size: 12px;
				margin-bottom: 0;
			}
			.aui-btn-tab .aui-iconfont {
				font-size: 22px;
				color: #666;
				padding-top: 5px;
				height: 30px;
				line-height: 30px;
				display: inline-block;
			}
			.aui-btn-tab li:active {
				color: #bdc3c7;
			}
			.aui-btn-tab li:active p {
				color: #bdc3c7;
			}
			.aui-btn-tab li:active span {
				color: #bdc3c7;
			}
			.aui-nav {
				background: #EEEEEE;
			}
			
			.swipe:active,.aui-icon-close:active{
				color:#C0392B;
			}
		</style>
	</head>
	<body>
		<!-- 第三头部 -->
		<div id="thridHeader" class="titlebar">
			<div class="topbar">
				<div class="back"  tapmode="" onclick="goback()">
					<i class="aui-iconfont aui-icon-left"></i>
				</div>
				<div class="search thrSearch">
					<i class="aui-iconfont aui-icon-search aui"></i>
					<input type="text" class="" id="field" placeholder="请输入搜索内容" oninput="edit(this)">
					<i class="aui-iconfont aui-icon-close" onclick="ClearName()" tapmode></i>
				</div>
				<div class="swipe" onclick="Search()" tapmode>
					搜索
				</div>
			</div>
		</div>
		<footer class="aui-nav" id="footer1">
			<div class="aui-content " id="tabmenu1">
				<ul class="aui-btn-tab">
					<li tapmode onclick="SelectAll();">
						<span class="aui-iconfont aui-icon-roundcheck"></span>
						<p id="SelectAll1">
							全选
						</p>
					</li>
					<li tapmode onclick="MenuMore('siglistsort_frm');">
						<span class="aui-iconfont aui-icon-order"></span>
						<p>
							排序
						</p>
					</li>
					<li tapmode onclick="Del();">
						<span class="aui-iconfont aui-icon-delete"></span>
						<p>
							删除
						</p>
					</li>
					<li tapmode onclick="AsTemplate();">
						<span class="aui-iconfont aui-icon-add1"></span>
						<p>
							用作模板
						</p>
					</li>
					<li tapmode onclick="Verify();">
						<span class="aui-iconfont aui-icon-safe"></span>
						<p>
							认证
						</p>
					</li>
				</ul>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript">
		function goback() {
			api.closeWin({
				name : 'search'
			});
		}

		var bSelect = [true, true, true];
		var kind = 1;
		var bMenu = false;
		//全选、反选
		function SelectAll() {
			api.sendEvent({
				name : 'SignList',
				extra : {
					'action' : 'SelectAll',
					'kind' : kind
				}
			});
			ChangeMenu('SelectAll', kind, ['取消全选', "全选"]);
		}

		function ChangeMenu(id, k, text) {
			var el = $api.byId(id + k);
			var el1 = $api.prev(el);
			if (bSelect[k]) {
				$api.text(el, text[0]);
				$api.removeCls(el1, 'aui-icon-roundcheck');
				$api.addCls(el1, 'aui-icon-roundcheckfill');
			} else {
				$api.text(el, text[1]);
				$api.removeCls(el1, 'aui-icon-roundcheckfill');
				$api.addCls(el1, 'aui-icon-roundcheck');
				//count[k] = 0;
			}
			bSelect[k] = !bSelect[k];
		}

		//var count = [0, 0, 0];
		//等多选项
		function MenuMore(framename) {
			var count = $api.getStorage('count') || 0;
			setTimeout(function() {
				api.openFrame({
					name : framename,
					url : framename + '.html',
					bounces : true,
					bgColor : 'rgba(0,0,0,0.6)',
					vScrollBarEnabled : false,
					hScrollBarEnabled : false,
					pageParam : {
						kind : kind,
						count : count
					},
					rect : {
						x : 0,
						y : 0,
						w : 'auto',
						h : 'auto'
					}
				});
			}, 100);
			bMenu = true;
		}

		function SortMore() {
			count = $api.getStorage('count');
			setTimeout(function() {
				api.openFrame({
					name : 'siglistsort_frm',
					url : 'siglistsort_frm.html',
					bounces : true,
					bgColor : 'rgba(0,0,0,0.6)',
					vScrollBarEnabled : false,
					hScrollBarEnabled : false,
					pageParam : {
						kind : kind,
						count : count
					},
					rect : {
						x : 0,
						y : 0,
						w : 'auto',
						h : 'auto'
					}
				});
			}, 100);
			bMenu = true;
		}

		var EventName = "SignList";
		function SendEvent(evt, data, callback) {
			api.sendEvent({
				name : EventName,
				extra : {
					'action' : evt,
					'kind' : kind,
					'data' : data
				}
			}, function(ret, err) {
				if ( typeof callback == 'function')
					callback(ret, err);
			});
		}

		//新增
		function AddSign() {
			api.openWin({
				name : 'root'
			});
			api.sendEvent({
				name : 'AddSign',
				extra : '2'
			})
		}

		function CloseMenu() {
			bMenu = false;
		}

//		function OpenSearch() {
//			api.openWin({
//				name : 'search',
//				url : 'signsearch_win.html'
//			});
//		}

		// 完成首页初始化
		apiready = function() {
			var thridHeader = $api.byId('thridHeader');
			$api.fixStatusBar(thridHeader);
			var headerPos = $api.offset(thridHeader);
			var foot = $api.byId('footer1');
			var footPos = $api.offset(foot);
			var body_h = $api.offset($api.dom('body')).h;
			api.openFrame({
				name : 'siglist_frm1',
				url : 'siglist_frm.html',
				vScrollBarEnabled : false,
				hScrollBarEnabled : false,
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : headerPos.w,
					h : body_h - headerPos.h - footPos.h
				},
				pageParam : {
					kind : 0
				}
			});
			api.openFrame({
				name : 'signsearch_frm',
				url : 'signsearch_frm.html',
				vScrollBarEnabled : false,
				hScrollBarEnabled : false,
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : headerPos.w,
					h : body_h - headerPos.h - footPos.h
				},
				delay : 200
			});
			
			//监听选择收缩内容时间
			api.addEventListener({
	            name:'SearchName'
            },function(ret,err){
            	var val=ret.value;            	
            	//alert(val);            	
            	var el=$api.byId('field');
            	$api.val(el, val);
            	Search();
            });
		};
		function Search() {		
			api.setFrameAttr({
	            name: 'signsearch_frm',
	            hidden:true
            });
			api.setFrameAttr({
	            name: 'siglist_frm1',
	            hidden:false
            });            
            var el=$api.byId('field');
            var val=$api.val(el);            
            var type=$api.getStorage('search_type')||"";            
           	api.sendEvent({
				name : EventName,
				extra : {
					'action' : 'Filter',
					'kind' : 0,
					'name' : val,
					'type':type
				}
			});
			
			api.sendEvent({
				name : 'NewSearch'				
			});
			var listname = $api.getStorage('historyname') || []; 
			//最多十个
			for(var i=0;i<listname.length,i<10;i++)
			{
				if(val==listname[i])					
					break;
			}
			
			if(i==10&&val!="")
			{
				listname.unshift(val);
			}
			if(listname.length>10)
				listname.pop();
			$api.setStorage('historyname',listname);
		}
		
		function ClearName(){
			api.setFrameAttr({
	            name: 'signsearch_frm',
	            hidden:false
            });
			api.setFrameAttr({
	            name: 'siglist_frm1',
	            hidden:true
            });	
            
            var el=$api.byId('field');
            var val=$api.val(el,"");            
		}
		
		function edit(el){
			var txt=$api.val(el);
			if(txt=="")
				ClearName();
		}

		function voiceSearch() {
			var obj = api.require('speechRecognizer');
			api.toast({
				msg : "语音识别开始，请说话",
				duration : 1000,
				location : "middle"
			});
			obj.record({
			}, function(ret, err) {
				if (ret.status) {
					// ret.wordStr;
					api.alert({
						title : "识别结果",
						msg : ret.wordStr
					})
					obj.stopRecord();
				}
			});
		}
	</script>
</html>